<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button class="getBtn">获取</button>
        <button class="setBtn">设置</button>
    </div>
    <!-- 
        表单提交
        action 数据提交的地址(如果不写默认提交当前页)

        以get方式提交数据时,会将参数数据队列拼接到url之后 用"?"分隔
        user=xxx

     -->
    <form class="form" action="" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user">
            <span id="userTips"></span>
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
            <span id="pwdTips"></span>
        </div>
        <div class="input-group">
            <label for="">手机号:</label>
            <input type="text" name="phone">
            <span id="pwdTips"></span>
        </div>
        <div class="input-group">
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
            <span id="pwdTips"></span>
        </div>
        <div class="input-group">
            <button id="btn">提交</button>
        </div>
    </form>

    <div>
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a>
    </div>
</body>
<script>
    // location -> 地址栏对象 (存放着url相关的信息)
    
    console.log(location);

    // location对象的属性和方法
    // 属性
    // 了解!!!
    // protocol  获取和设置url的协议部分
    // hostname  获取和设置url的域名部分
    // port      获取和设置url的端口部分

    // host      获取和设置url的域名 + 端口部分
    // origin    获取和设置url的协议 + 域名 + 端口部分

    // pathname  获取和设置url的文件路径部分

    // 记忆
    // search    获取和设置url的参数数据部分
    // hash      获取和设置url的锚点部分
    // href      获取和设置url

    // 方法
    // location.reload()   重新载入(刷新)

    var getBtn = document.getElementsByClassName("getBtn")[0];
    var setBtn = document.getElementsByClassName("setBtn")[0];

    getBtn.onclick = function(){
        console.log(location.protocol);
        console.log(location.hostname);
        console.log(location.port);
        console.log(location.host);
        console.log(location.origin);
        console.log(location.pathname);
        console.log(location.search);
        console.log(location.hash);
        console.log(location.href);
    }

    setBtn.onclick = function(){
        // location.protocol = "https:";
        // location.hostname = "localhost";
        // location.port = "6600";
        // location.pathname = "/day12/html/07 圆形钟表.html";
        // location.search = "?a=1&b=2";
        // var list = ["#one","#two","#three"];
        // var index = Math.floor(Math.random()*list.length);
        // location.hash = list[index];

        
        // location.href = "https://www.baidu.com";  //当前窗口跳转
        // location.href = "../../day12/html/07 圆形钟表.html";  //当前窗口跳转

        location.reload();
    }
</script>

</html>